<template>
  <view class="uni-vertical-tab" :style="{height: height}">
    <view class="box" style="height: 100%;">
      <scroll-view
        class="scroll-box bcl-white"
        scroll-y
        scroll-with-animation
        :scroll-into-view="'current_' + (currentIndex - 1)"
      >
        <view class="container-cate text-center" v-if="tabTitle && tabTitle.length">
          <view
            class="cate bcl-white"
            v-for="(item, index) in tabTitle"
            :key="index"
            :id="'current_' + index"
            :class="{'bcl-active cl-main bold active-bottom' : currentIndex === index}"
            @tap="change(index, item)"
          >
            <view class="f-14 hide-text-1">{{item[prop] || item}}</view>
          </view>
        </view>
      </scroll-view>

      <!-- 内容插槽 -->
      <view class="content-container box-1 bcl-active">
        <slot name="content"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniVerticalTab",

  data() {
    return {
      currentIndex: 0
    };
  },

  props: {
    /**
     * 表头数据
     * @type: 可传入索引值数组 如 ['全部', '分类一', '分类二'] 或 传入对象数组 [{ id: 1, name: '全部'}]
     */
    tabTitle: {
      type: Array,
      default: () => []
    },

    height: [String],
	
	// tab表头字段名
	prop: {
		type: String,
		default: 'name'
	},
	
	// 父组件传入的index, 用于外部修改当前选择
	tabIndex: {
		type: Number,
		default: 0
	}
  },
  
  watch: {
	tabIndex(val) {
		this.currentIndex = val;
	}
  },

  methods: {
    /**
     * @methods: change 改变当前tab index
     * @remark: 向外发射索引值及当前点击的对象
     */
    change(index, item) {
      this.currentIndex = index;
      this.$emit("change", {
        index,
        item
      });
    }
  }
};
</script>

<style scoped lang="scss">
.uni-vertical-tab {
  height: calc(100vh - var(--window-top) - 100upx);
  overflow: hidden;
  background: $color-white;

  .scroll-box {
    width: 200upx;
    height: 100%;

    .container-cate {
      height: 100%;
      line-height: 100upx;
      white-space: nowrap;

      .cate {
        padding: 0 15upx;
        text-align: center;
        background: $color-white;
        position: relative;
        transition: all 0.2s ease;

        &.active-bottom::before {
          content: "";
          width: 6upx;
          height: 30upx;
          background: $color-main;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          border-radius: 8upx;
        }
      }

      .name {
        width: 100%;
      }
    }
  }

  .content-container {
    height: 100%;
    overflow-y: scroll;
  }
}
</style>
